<template>
  <div class="map-container">
    <div id="map" class="container"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as mapv from "mapv";
export default {
  name: "Map",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      const map = this.$baseMap();
      axios
        .get(
          "https://cdn.jsdelivr.net/npm/mapv@2.0.12/examples/data/od-xierqi.txt"
        )
        .then((rs) => {
          let data = [];
          let timeData = [];

          rs = rs.data.split("\n");
          let maxLength = 0;
          for (let i = 0; i < rs.length; i++) {
            let item = rs[i].split(",");
            let coordinates = [];
            if (item.length > maxLength) {
              maxLength = item.length;
            }
            for (let j = 0; j < item.length; j += 2) {
              let x = (Number(item[j]) / 20037508.34) * 180;
              let y = (Number(item[j + 1]) / 20037508.34) * 180;
              y =
                (180 / Math.PI) *
                (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
              if (x == 0 || y == NaN) {
                continue;
              }
              coordinates.push([x, y]);
              timeData.push({
                geometry: {
                  type: "Point",
                  coordinates: [x, y],
                },
                count: 1,
                time: j,
              });
            }
            data.push({
              geometry: {
                type: "LineString",
                coordinates: coordinates,
              },
            });
          }

          let dataSet = new mapv.DataSet(data);

          let options = {
            strokeStyle: "rgba(53,57,255,0.5)",
            // globalCompositeOperation: 'lighter',
            shadowColor: "rgba(53,57,255,0.2)",
            shadowBlur: 3,
            lineWidth: 3.0,
            draw: "simple",
          };

          let mapvLayer = new mapv.MaptalksLayer(
            "mapv1",
            dataSet,
            options
          ).addTo(map);

          let dataSet2 = new mapv.DataSet(timeData);

          let options2 = {
            fillStyle: "rgba(255, 250, 250, 0.2)",
            globalCompositeOperation: "lighter",
            size: 1.5,
            animation: {
              stepsRange: {
                start: 0,
                end: 100,
              },
              trails: 3,
              duration: 5,
            },
            draw: "simple",
          };

          let mapvLayer2 = new mapv.MaptalksLayer(
            "mapv2",
            dataSet2,
            options2
          ).addTo(map);
        });
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.map-container {
  .container {
    width: 100%;
    height: calc(100vh - 214px);
  }
}
</style>
